<template>
  <div>
    <!-- 导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索区域 -->
    <div style="margin: 10px 0">
      <el-button type="primary" style="margin-right: 20px" @click="addopen"
        ><el-icon><Plus /></el-icon>添加用户</el-button
      >
      <el-input
        style="width: 200px; cursor: pointer"
        suffix-icon="el-icon-search"
        placeholder="请输入用户名"
        v-model="account"
      ></el-input>
      <el-input
        style="margin-right: 20px; width: 200px; cursor: pointer"
        suffix-icon="el-icon-position"
        placeholder="请输入地址"
        v-model="address"
      ></el-input>
      <el-button type="primary" @click="getuserList">搜 索</el-button>
      <el-button type="warning" @click="reset">重 置</el-button>
    </div>
    <!-- 主体区域 -->
    <el-table :data="userList" border style="width: 100%">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="用户名" prop="account" />
      <el-table-column label="用户id" prop="id" />
      <el-table-column label="性别">
        <template #default="scope">
          <div v-if="scope.row.sex == 1">男</div>
          <div v-else>女</div>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" prop="birth" />
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="邮箱地址" prop="email" />
      <el-table-column label="头像">
        <template #default="scope">
          <img
            v-if="scope.row.userphoto"
            :src="scope.row.userphoto"
            style="height: 30px; width: 30px; border-radius: 50%"
          />
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column label="角色">
        <template #default="scope">
          <div v-for="itme in roleList" :key="itme">
            <div v-if="itme.id == scope.row.roleid">
              {{ itme.rolename }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createtime" />
      <el-table-column align="center" label="操作" width="200%">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)"
            >修 改</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删 除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 新增区域 -->
    <el-dialog v-model="dialogVisible" title="用户信息" width="30%">
      <el-form label-width="70px" size="small">
        <el-form-item label="用户名">
          <el-input
            size="small"
            v-model="form.account"
            type="text"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" v-if="form.id == null">
          <el-input
            size="small"
            v-model="form.password"
            type="text"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            clearable
            v-model="form.sex"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in sexs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input
            v-model="form.birth"
            type="date"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="form.phone"
            type="text"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="form.address"
            type="text"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址">
          <el-input
            v-model="form.email"
            type="text"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action="#"
            :show-file-list="false"
            :on-change="handleChange"
            :auto-upload="false"
            list-type="picture-card"
          >
            <img
              v-if="form.userphoto"
              :src="form.userphoto"
              class="avatar"
              width="148"
              height="148"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="角色">
          <el-select
            clearable
            v-model="form.roleid"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in roleList"
              :key="item.roleid"
              :label="item.rolename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserView",
  data() {
    return {
      userList: [],
      roleList: [],
      dialogVisible: false,
      form: {},
      sexs: [
        {
          value: 0,
          label: "女",
        },
        {
          value: 1,
          label: "男",
        },
      ],
      account: "",
      address: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {
    this.getuserList();
    this.getroleList();
  },
  methods: {
    handleChange(file) {
      const isJPG = file.raw.type.indexOf("image") !== -1;
      const isLt2M = file.raw.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
      this.form.userphoto = file.url;
      this.file = file;
    },
    //新增用户框打开方法
    addopen() {
      this.form = {};
      this.dialogVisible = true;
    },
    //搜索框重置方法
    reset() {
      (this.account = ""), (this.address = ""), this.getuserList();
    },
    //删除用户方法
    handleDelete(userid) {
      this.$http.delete("/user/" + userid).then((res) => {
        if (res.data.status == 200) {
          this.$message.success("删除成功"), this.getuserList();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    //修改新增用户方法
    save() {
      let fromdata = new FormData();
      if(this.file!=null){
        fromdata.append("file", this.file.raw);
        this.$http.post("/oss/upload", fromdata).then((ress) => {
        if (ress.data.status == 200) {
          this.form.userphoto = ress.data.data;
          console.log(ress.data.data);
          this.$http.post("/user/", this.form).then((res) => {
            if (res.data.status == 200) {
              this.$message.success("保存成功"),
                (this.dialogVisible = false),
                this.getuserList();
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          this.$message.error(ress.data.message);
          return false;
        }
      });
      }else{
        this.$http.post("/user/", this.form).then((res) => {
            if (res.data.status == 200) {
              this.$message.success("保存成功"),
                (this.dialogVisible = false),
                this.getuserList();
            } else {
              this.$message.error(res.data.message);
            }
          });
      }
    },
    //修改模态框展开并且获取原本数据方法
    handleEdit(userid) {
      this.dialogVisible = true;
      this.$http.get("/user/" + userid).then((res) => {
        if (res.data.status == 200) {
          this.form = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //获取根据id获取角色
    getroleList() {
      this.$http.get("/role").then((res) => {
        if (res.data.status == 200) {
          this.roleList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getuserList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getuserList();
    },
    //获取用户列表
    getuserList() {
      //请求分页查询数据
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        account: this.account,
        address: this.address,
      };
      this.$http.get("/user/page", { params }).then((res) => {
        if (res.data.status == 200) {
          console.log(res);
          this.userList = res.data.data.records;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
};
</script>

<style>
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 128px;
  text-align: center;
}

.avatar {
  display: block;
}
</style>